<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-user"></i> 人员管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 搜索 -->
            <el-form ref="searchForm" :model="searchForm" inline label-width="80px">
                <!-- <el-form-item>
          <el-form-item label="角色ID">
            <el-select
              v-model="searchForm.RoleID"
              placeholder="请选择RoleID"
            >
              <el-option
                v-for="(item,index) in RoleIDList"
                :label="item.roleMc"
                :value="item.roleId"
                :key="index"
              />
            </el-select>
          </el-form-item>
        </el-form-item> -->
                <el-form-item label="人员姓名" prop="name">
                    <el-input v-model="searchForm.name" placeholder="输入搜索姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item style="margin-left: 5%">
                    <el-button type="danger" icon="el-icon-plus" @click="showDialog = true">添加人员</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border style="width: 100%; font-size: 15px">
                <!-- <el-table-column
          prop='YHM'
          label='用户名'
        ></el-table-column> -->
                <!-- <el-table-column
          prop='XB'
          label='用户名'
        >{{userForm.XB}}</el-table-column> -->
                <el-table-column prop="XM" label="姓名" width="130px"></el-table-column>
                <el-table-column prop="XB" label="性别" width="55px"></el-table-column>
                <el-table-column prop="SJH" label="手机号"></el-table-column>
                <el-table-column prop="YX" label="邮箱"></el-table-column>
                <el-table-column prop="RYZTMC" label="人员状态" width="90px"></el-table-column>
                <!--<el-table-column prop='loginTime' label='最后登录时间'></el-table-column>-->
                <el-table-column label="操作" min-width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" icon="el-icon-check" @click="enableUserBtn(scope.row)">启用</el-button>
                        <el-button type="info" icon="el-icon-close" size="mini" @click="stopUserBtn(scope.row)">停用</el-button>
                        <el-button size="mini" type="warning" icon="el-icon-edit" @click="clickEditFn(scope.row)">编辑</el-button>
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="roleChoseBtn(scope.row)">分配角色</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delPersonnel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="list.length"
            >
            </el-pagination>
            <!-- 添加弹层 -->
            <el-dialog
                :title="isEdit ? '编辑人员信息' : '添加人员'"
                :visible.sync="showDialog"
                width="37%"
                center
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                @close="closeFn"
            >
                <el-form ref="userForm" :model="userForm" :rules="rules" label-width="80px" label-position="right">
                    <!-- <el-form-item label="用户名">
            <el-input
              v-model='userForm.YHM'
              placeholder='请输入用户名'
              style='width: 87%'
            ></el-input>
          </el-form-item> -->
                    <el-form-item label="姓名" prop="XM">
                        <el-input v-model="userForm.XM" placeholder="请输入真实姓名" style="width: 87%" />
                    </el-form-item>
                    <el-form-item label="性别" prop="XB">
                        <el-radio-group v-model="userForm.XB">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="SFZH">
                        <el-input v-model="userForm.SFZH" placeholder="请输入身份证号" style="width: 87%" />
                    </el-form-item>
                    <el-form-item label="年龄" prop="RYNL">
                        <el-input v-model="userForm.RYNL" placeholder="请输入年龄" style="width: 87%" />
                    </el-form-item>
                    <el-form-item label="邮箱" prop="YX">
                        <el-input v-model="userForm.YX" placeholder="请输入邮箱" style="width: 87%"></el-input>
                    </el-form-item>
                    <el-form-item label="工作单位" prop="YLJG">
                        <el-select v-model="userForm.YLJG" placeholder="请选择类型" style="width: 87%">
                            <el-option
                                v-for="companyItem in companyList"
                                :label="companyItem.ORGMC"
                                :value="companyItem.ORGMC"
                                :key="companyItem.ORGBM"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="固定电话" prop="GDDH">
                        <el-input v-model="userForm.GDDH" placeholder="请输入固定电话" style="width: 87%"></el-input>
                    </el-form-item>
                    <el-form-item label="人员分类" prop="RYFL">
                        <el-select v-model="userForm.RYFL" placeholder="请选择类型" style="width: 87%">
                            <el-option
                                v-for="(userSortItem, index) in userSortList"
                                :label="userSortItem.zdmc"
                                :value="userSortItem.zdmc"
                                :key="index"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号" prop="SJH">
                        <el-input v-model="userForm.SJH" placeholder="请输入手机号码" style="width: 87%"></el-input>
                    </el-form-item>
                    <!-- <el-form-item
            label="验证码"
            prop="YZM"
          >
            <el-input
              style='width: 87%'
              v-model="userForm.YZM"
            ></el-input>
            <span
              style="position: absolute;top: 8%;right: 15%;cursor:pointer;"
              @click="getCodeClick()"
            >{{ code }}</span>
          </el-form-item> -->
                    <!-- <el-form-item
            label="专业"
            prop="ZY"
          >
            <el-input
              style='width: 87%'
              v-model="userForm.ZY"
            ></el-input>
          </el-form-item> -->
                    <!-- <el-form-item
            label="密码"
            prop="password"
          >
            <el-input
              style='width: 87%'
              v-model="userForm.password"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码"
            prop="respassword"
          >
            <el-input
              style='width: 87%'
              v-model="userForm.respassword"
            ></el-input>
          </el-form-item> -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="quxiao">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 分配角色弹层 -->
            <el-dialog
                title="分配角色"
                :visible.sync="roleChose"
                width="37%"
                center
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                @close="closeFn"
            >
                <el-form ref="userForm" :model="userForm" :rules="rules" label-width="80px" label-position="right">
                    <el-form-item label="角色">
                        <el-select v-model="role" placeholder="请选择角色">
                            <el-option
                                v-for="roleItem in RoleIDList"
                                :label="roleItem.roleMc"
                                :value="roleItem.roleId"
                                :key="roleItem.roleId"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="roleChose = false">取 消</el-button>
                    <el-button type="primary" @click="roleChoseSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {
    getPersonnelAPI,
    getRoleListAPI,
    getRoleChoseAPI,
    editPersonnelAPI,
    delPersonnelAPI,
    getOrganizationAPI,
    updateUserStateAPI
} from '@/api/backStage.js';
import { getCodeAPI, getSelectListAPI, getRegisterAPI } from '@/api/user';
export default {
    name: 'personnel',
    data() {
        return {
            currentPage: 1, //初始页
            pagesize: 10, // 每页的数据
            isEdit: false, // 是否为编辑状态
            showDialog: false, // 弹层显示
            roleChose: false, // 分配角色弹层
            list: [],
            ip: '',
            RoleIDList: [],
            companyList: [],
            userSortList: [],
            code: '',
            // 搜索
            searchForm: {
                // RoleID: '',
                name: ''
            },
            role: '', // 角色
            roleList: [], // 角色列表
            rowData: [],
            userForm: {
                YHM: '', // 用户名
                XM: '', // 姓名
                XB: ' ', // 性别
                SFZH: '', // 身份证号
                RYNL: '', // 年龄
                ZY: '', // 专业
                YX: '', // 邮箱
                YLJG: '', // 单位,
                GDDH: '', // 固定电话
                SJH: '', // 手机
                password: '', //密码
                respassword: '', // 重复密码
                RYFL: '', // 人员分类
                YZM: '' // 验证码
            },
            YHM: '',
            rules: {
                name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
            }
        };
    },
    mounted() {
        this.ready();
        this.getPersonnel();
        this.getRoleListData();
        // this.getCodeClick();
        this.getCompanyListData();
        this.getUserSortListData();
    },
    methods: {
        // 获取ip
        ready() {
            let cip = returnCitySN['cip'];
            let cid = returnCitySN['cid'];
            let cname = returnCitySN['cname'];
            this.ip = cip;
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function(size) {
            this.pagesize = size;
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
        },
        // 获取机构列表信息
        async getCompanyListData() {
            let res = await getOrganizationAPI({
                token: this.$store.state.user.token,
                OrgBM: 'null',
                OrgMC: 'null',
                OrgFJ: 'null',
                OrgLX: 'null'
            });
            if (res.code == 'succ') {
                this.companyList = res.result;
            }
        },
        async getUserSortListData() {
            const res = await getSelectListAPI({
                key: 'ZCRYFL'
            });
            if (res.code == 'succ') {
                this.userSortList = res.result;
            } else {
                this.$message.error(res.message);
            }
        },

        // 点击获取验证码
        // async getCodeClick() {
        //     const res = await getCodeAPI({
        //         ip: this.ip,
        //         SJH: this.userForm.SJH
        //     });
        //     if (res.code == 'succ') {
        //         this.code = res.result;
        //     }
        // },
        // 获取列表
        async getPersonnel() {
            const res = await getPersonnelAPI({
                token: this.$store.state.user.token,
                XM: 'null',
                YLJG: 'null'
            });
            if (res.code == 'succ') {
                this.list = res.result;
            }
            // this.list.forEach((item) => (item.XB ? (item.XB = '男') : (item.XB = '女')));
        },
        // 搜索按钮的点击事件
        async searchSubmit() {
            const res = await getPersonnelAPI({
                token: this.$store.state.user.token,
                XM: this.searchForm.name || 'null',
                YLJG: 'null'
            });
            if (res.code == 'succ') {
                this.list = res.result;
                this.$message.success(res.message);
                this.searchForm = {};
            } else {
                this.$message.error(res.message);
                this.searchForm = {};
            }
        },
        // 提交
        onSubmit() {
            this.$refs.userForm.validate(value => {
                if (value) {
                    this.isEdit ? this.editPersonnelInfo() : this.addPersonnelInfo();
                    this.showDialog = false;
                }
            });
        },
        // 添加人员
        async addPersonnelInfo() {
            // if (this.userForm.code != this.code) {
            //     this.$message({
            //         showClose: true,
            //         message: '提示：请输入正确的验证码',
            //         type: 'error'
            //     });
            // }
            let obj = {
                YHM: 'null',
                XM: this.userForm.XM,
                XB: this.userForm.XB === '1' ? '男' : '女',
                // XB: this.userForm.XB,
                SFZH: this.userForm.SFZH,
                RYNL: this.userForm.RYNL,
                // XL: this.userForm.XL,
                ZY: 'null',
                YX: this.userForm.YX,
                YLJG: this.userForm.YLJG,
                GDDH: this.userForm.GDDH,
                SJH: this.userForm.SJH,
                PASSWORD: '111111',
                RESPASSWORD: '111111',
                RYFL: this.userForm.RYFL,
                IP: this.ip,
                YZM: 'null'
            };
            const res = await getRegisterAPI({
                Params: obj
            });
            if (res.code == 'succ') {
                this.$message.success('添加成功!');
                this.getPersonnel(); // 重新获取数据
            } else {
                this.$message.error(res.message);
            }
        },
        // 点击编辑
        clickEditFn(row) {
            console.log(row);
            this.YHM = row.YHM;
            this.isEdit = true;
            this.showDialog = true;
            if (row.XB == '女  ') {
                row.XB = '0';
            } else {
                row.XB = '1';
            }
            this.userForm = row; // 数据回填
        },
        // 编辑人员
        async editPersonnelInfo() {
            let obj = {
                YHM: this.YHM,
                XM: this.userForm.XM,
                XB: this.userForm.XB === '1' ? '男' : '女',
                // XB: this.userForm.XB,
                SFZH: this.userForm.SFZH,
                RYNL: this.userForm.RYNL,
                // XL: this.userForm.XL,
                ZY: 'null',
                YX: this.userForm.YX,
                YLJG: this.userForm.YLJG,
                GDDH: this.userForm.GDDH,
                SJH: this.userForm.SJH,
                PASSWORD: '111111',
                RESPASSWORD: '111111',
                RYFL: this.userForm.RYFL,
                IP: this.ip,
                YZM: this.userForm.YZM
            };
            try {
                const res = await editPersonnelAPI({
                    token: this.$store.state.user.token,
                    Params: obj
                });
                if (res.code == 'succ') {
                    this.$message.success('编辑成功!');
                    this.getPersonnel();
                }
            } catch (err) {
                this.$message.error(err.message);
            }
        },
        // 表格的启用
        async enableUserBtn(row) {
            let res = await updateUserStateAPI({
                token: this.$store.state.user.token,
                rybh: row.YHM,
                RYZT: '1'
            });
            if (res.code == 'succ') {
                this.$message.success(res.result);
                this.getPersonnel();
            } else {
                this.$message.error(res.result);
            }
        },
        // 表格的停用
        async stopUserBtn(row) {
            let res = await updateUserStateAPI({
                token: this.$store.state.user.token,
                rybh: row.YHM,
                RYZT: '2'
            });
            if (res.code == 'succ') {
                this.$message.success(res.result);
                this.getPersonnel();
            } else {
                this.$message.error(res.result);
            }
        },
        // 删除人员
        delPersonnel(row) {
            this.$confirm('此操作将删除该内容, 是否继续?', '提示', {
                type: 'warning'
            }).then(async () => {
                // 1.传入id,发送请求
                const res = await delPersonnelAPI({
                    token: this.$store.state.user.token,
                    rybh: row.YHM,
                    ip: this.ip
                });
                if (res.code == 'succ') {
                    this.$message.success('删除成功');
                    this.getPersonnel();
                } else {
                    this.$message.success(res.message);
                }
                // 2.若当前页最后一条数据被删除时,就去自动请求上一页数据
                // if (this.list.length === 1) {
                //     this.params.page = Math.max(--this.params.page, 1)
                // }
                // 3.重新渲染数据
                // this.getUser()
                // 4. 提示信息
            });
        },
        // 获取角色列表
        // 获取角色管理列表
        async getRoleListData() {
            let res = await getRoleListAPI({
                token: this.$store.state.user.token,
                mc: 'null'
            });
            if (res.code == 'succ') {
                // 赋值
                this.RoleIDList = res.result;
            }
        },
        // roleChose
        roleChoseBtn(row) {
            this.rowData = row;
            this.roleChose = true;
        },
        //
        quxiao() {
            this.showDialog = false;
            this.getPersonnel();
        },
        // 分配角色
        async roleChoseSubmit() {
            const res = await getRoleChoseAPI({
                token: this.$store.state.user.token,
                OprID: this.rowData.XM,
                RoleID: this.role
            });
            if ((res.code = 'succ')) {
                this.$message.success(res.message);
            }
            this.role = '';
            this.roleChose = false;
        },
        // 关闭弹窗的回调
        closeFn() {
            this.userForm = {};
            this.isEdit = false;
            this.role = '';
            this.$refs.userForm.resetFields();
            this.getPersonnel();
        }
    }
};
</script>

<style scoped></style>
